<template>
  <div class="questions-wrap relative">
    <img class="robot w-[120px] absolute top-5 -left-36" referrerpolicy="no-referrer" src="@/assets/images/robot.png" />
    <div class="questions flex flex-col">
      <span class="questions-title">你可以这样问我</span>
      <div class="questions-list flex">
        <div
          class="question-item flex flex-col cursor-pointer hover:shadow transition-all duration-100 ease-linear hover:-translate-y-1"
          v-for="(item, index) in loopData"
          :key="index"
          @click="quickQuestions(item)"
        >
          <div class="question-item-title flex justify-between">
            <div class="question-item-dot flex flex-col" v-html="item.icon"></div>
            <span class="question-item-title-text" v-html="item.title"></span>
          </div>
          <span class="question-item-description line-clamp-2 text-ellipsis" v-html="item.description"></span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'

const emit = defineEmits(['quick-questions'])

const loopData = ref([
  {
    title: '广西桉树发展历程',
    description: '（一）少量引种、零星种植阶段（20世纪70年代以前）<br/>广西引种桉树始于1890年，最初零星种植于公园、路边、村旁。1951年铁道部门沿铁路成片种植桉树作枕木材。1950年代后期，桉树被列为广西主要造林树种之一。1965年成立桂南林业局，开展窿缘桉、柠檬桉种植。后虽撤销，但南宁地区东门、石塘、黎塘林场营造了一定规模的桉树林。因缺乏良种良法，平均蓄积生长量仅约0.3立方米/亩。',
    icon: `<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <title>广西桉树发展历程</title>
        <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="1" transform="translate(-701.000000, -400.000000)">
                <g id="编组-3" transform="translate(701.000000, 400.000000)">
                    <circle id="椭圆形" fill="#DBEDE4" cx="12" cy="12" r="12"></circle>
                    <path d="M15.3950617,6 C15.9218107,6 16.3209877,6.17006803 16.5925926,6.51020408 C16.8641975,6.85034014 17,7.26530612 17,7.75510204 L17,14.9795918 C17,15.2063492 16.9135802,15.4104308 16.7407407,15.5918367 L14.6790123,17.7687075 C14.5720165,17.8684807 14.4814815,17.9319728 14.4074074,17.9591837 C14.3333333,17.9863946 14.2386831,18 14.1234568,18 L8.58024691,18 C8.3909465,18 8.20164609,17.9569161 8.01234568,17.8707483 C7.82304527,17.7845805 7.65432099,17.6621315 7.50617284,17.5034014 C7.35802469,17.3446712 7.23662551,17.154195 7.14197531,16.9319728 C7.0473251,16.7097506 7,16.462585 7,16.1904762 L7,7.75510204 C7,7.21995465 7.13374486,6.79365079 7.40123457,6.47619048 C7.66872428,6.15873016 8.04938272,6 8.54320988,6 L15.3950617,6 Z M12.8024691,14.5306122 C12.909465,14.5306122 13,14.4897959 13.0740741,14.4081633 C13.1481481,14.3265306 13.1851852,14.2267574 13.1851852,14.1088435 C13.1851852,13.9818594 13.1481481,13.8798186 13.0740741,13.8027211 C13,13.7256236 12.909465,13.6870748 12.8024691,13.6870748 L8.9382716,13.6870748 C8.83127572,13.6870748 8.74074074,13.7256236 8.66666667,13.8027211 C8.59259259,13.8798186 8.55555556,13.9818594 8.55555556,14.1088435 C8.55555556,14.2267574 8.59259259,14.3265306 8.66666667,14.4081633 C8.74074074,14.4897959 8.83127572,14.5306122 8.9382716,14.5306122 L12.8024691,14.5306122 Z M14.345679,11.9727891 C14.4526749,11.9727891 14.5432099,11.9319728 14.617284,11.8503401 C14.691358,11.7687075 14.7283951,11.6689342 14.7283951,11.5510204 C14.7283951,11.4331066 14.691358,11.3333333 14.617284,11.2517007 C14.5432099,11.170068 14.4526749,11.1292517 14.345679,11.1292517 L8.9382716,11.1292517 C8.83127572,11.1292517 8.74074074,11.170068 8.66666667,11.2517007 C8.59259259,11.3333333 8.55555556,11.4331066 8.55555556,11.5510204 C8.55555556,11.6689342 8.59259259,11.7687075 8.66666667,11.8503401 C8.74074074,11.9319728 8.83127572,11.9727891 8.9382716,11.9727891 L14.345679,11.9727891 Z M15.1111111,9.42857143 C15.218107,9.42857143 15.308642,9.3877551 15.382716,9.30612245 C15.4567901,9.2244898 15.4938272,9.12018141 15.4938272,8.99319728 C15.4938272,8.87528345 15.4567901,8.7755102 15.382716,8.69387755 C15.308642,8.6122449 15.218107,8.57142857 15.1111111,8.57142857 L8.9382716,8.57142857 C8.83127572,8.57142857 8.74074074,8.6122449 8.66666667,8.69387755 C8.59259259,8.7755102 8.55555556,8.87528345 8.55555556,8.99319728 C8.55555556,9.12018141 8.59259259,9.2244898 8.66666667,9.30612245 C8.74074074,9.3877551 8.83127572,9.42857143 8.9382716,9.42857143 L15.1111111,9.42857143 Z" id="形状" fill="#2B6E50" fill-rule="nonzero"></path>
                </g>
            </g>
        </g>
    </svg>`
  },
  {
    title: '广西桉树人工林产业现状',
    description: '一、产业总体概况<br />广西是我国乃至世界上桉树人工林面积最大、产业链最完整的地区。经过数十年的培育改良与科学经营，桉树已成为广西林业发展的支柱树种和生态经济建设的重要载体。桉树以其速生性、适应性强、用途广、经济效益高等特点，为广西乃至全国木材供给体系发挥了关键支撑作用。',
    icon: `<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <title>广西桉树人工林产业现状</title>
        <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="1" transform="translate(-1133.000000, -400.000000)">
                <g id="编组-8" transform="translate(1133.000000, 400.000000)">
                    <circle id="椭圆形" fill="#DBEDE4" cx="12" cy="12" r="12"></circle>
                    <path d="M11.5726104,12.4558891 C11.5066116,12.3861403 11.5066116,12.3156415 11.5066116,12.2458927 L11.5066116,7.1234807 C11.5066116,6.91198433 11.3738638,6.77173674 11.1751173,6.77173674 C8.32516622,6.98248312 6.13895378,9.29844333 6.00620606,12.1048951 C5.87420833,14.9825957 7.86167418,17.4380535 10.6448764,17.929295 C10.9096218,17.9997938 11.1751173,17.9997938 11.5066116,17.9997938 C12.7650899,17.9997938 13.9583194,17.5790511 14.8853035,16.8073143 C14.9520524,16.7368155 15.0180512,16.6663167 15.0180512,16.5260692 C15.0180512,16.4563204 14.9520524,16.3160728 14.8853035,16.245574 L11.5726104,12.4558891 Z M12.5003445,11.6834024 L17.2710125,11.6834024 C17.3370114,11.6834024 17.4697591,11.6136536 17.536508,11.5439048 C17.6025068,11.473406 17.6025068,11.4036572 17.6025068,11.2634096 C17.4037602,8.4562078 15.2175478,6.20999639 12.5003445,6 C12.4335956,6 12.3015979,6.07049879 12.2348491,6.07049879 C12.2348491,6.21074638 12.1688502,6.35099397 12.1688502,6.42074277 L12.1688502,11.3331584 C12.1688502,11.4036572 12.2348491,11.5431548 12.3015979,11.6136536 C12.3675968,11.6136536 12.4335956,11.6841523 12.5003445,11.6841523 L12.5003445,11.6834024 Z M17.8672523,12.5263879 C17.8012534,12.4558891 17.7352545,12.3861403 17.6025068,12.3861403 L13.2927059,12.3861403 C13.152479,12.3861937 13.0248516,12.4670925 12.9649615,12.5938867 L12.9638365,12.5961367 C12.8978377,12.7363843 12.9638365,12.8773818 13.0305854,12.9471306 L15.9457853,16.245574 C16.0117842,16.3153228 16.078533,16.3858216 16.2112807,16.3858216 C16.2772796,16.3858216 16.4100273,16.3153228 16.4760262,16.245574 C17.3370114,15.3328397 17.8672523,14.0706113 18,12.7363843 C17.9340011,12.6666355 17.9340011,12.5961367 17.8672523,12.5263879 L17.8672523,12.5263879 Z" id="形状" fill="#2B6E50" fill-rule="nonzero"></path>
                </g>
            </g>
        </g>
    </svg>`
  },
  {
    title: '广西主栽桉树品种介绍',
    description: '广西是我国速生丰产林的重要产区，桉树种植面积及产量均居全国前列。随着良种选育及无性系繁育技术的发展，一批优良桉树品种被广泛推广应用。本报告系统介绍广西当前主要栽培的六个桉树品种，包括其生长特性、木材性质、抗病性及适应性等，为桉树产业发展与品种选择提供参考。',
    icon: `<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <title>广西主栽桉树品种介绍</title>
        <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="1" transform="translate(-701.000000, -544.000000)">
                <g id="编组-6" transform="translate(701.000000, 544.000000)">
                    <circle id="椭圆形" fill="#DBEDE4" cx="12" cy="12" r="12"></circle>
                    <path d="M6.00484551,15.2063134 C6.00484551,16.7418264 7.25089517,17.9932356 8.79491323,17.9932356 C10.3389313,17.9932356 11.5849809,16.7485908 11.5849809,15.2063134 L11.5849809,12.4193912 L8.78814122,12.4193912 C7.25089517,12.4261556 6.00484551,13.6708005 6.00484551,15.2063134 Z M18.0048455,8.78692221 C18.0048455,7.25140924 16.7587958,6 15.2147778,6 C13.6707597,6 12.4247101,7.24464487 12.4247101,8.78692221 L12.4247101,11.5738444 L15.2147778,11.5738444 C16.7587958,11.5738444 18.0048455,10.3291995 18.0048455,8.78692221 Z M8.78814122,11.5738444 L11.5782089,11.5738444 L11.5782089,8.78692221 C11.5782089,7.25140924 10.3321593,6 8.78814122,6 C7.24412316,6 6.00484551,7.25140924 6.00484551,8.78692221 C6.00484551,10.3291995 7.25089517,11.5738444 8.78814122,11.5738444 Z M15.2147778,12.4261556 L12.4247101,12.4261556 L12.4247101,15.2130778 C12.4247101,16.7485908 13.6707597,18 15.2147778,18 C16.7587958,18 18.0048455,16.7553551 18.0048455,15.2130778 C18.0048455,13.6708005 16.7587958,12.4261556 15.2147778,12.4261556 Z" id="形状" fill="#2B6E50" fill-rule="nonzero"></path>
                </g>
            </g>
        </g>
    </svg>`
  },
  {
    title: '广西桉树人工林易受哪些病虫害入侵',
    description: '广西地处我国南方典型的亚热带季风气候区，具有温暖湿润、光照充足、雨量丰沛的自然条件，是桉树人工林生长最为适宜的地区之一。经过数十年的发展，广西桉树种植面积已超过4200万亩，成为全国桉树人工林面积最大、产业链最完整的地区。然而，随着桉树速生丰产林的快速扩张和单一树种的大面积连片种植，生态系统的稳定性与抵御风险的能力逐渐降低，为病虫害的滋生、传播和暴发提供了有利条件。近年来，广西桉树人工林的病虫害种类、发生面积及危害程度不断增加，对林木的生长量、材质和生态安全造成了严重影响。',
    icon: `<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <title>广西桉树人工林易受哪些病虫害入侵</title>
        <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="1" transform="translate(-1133.000000, -544.000000)">
                <g id="编组-7" transform="translate(1133.000000, 544.000000)">
                    <circle id="椭圆形" fill="#DBEDE4" cx="12" cy="12" r="12"></circle>
                    <path d="M17.9995662,12.8574279 C17.9995662,12.9899503 17.9520923,13.1047223 17.8571446,13.201744 C17.7682353,13.2960283 17.6465444,13.3484968 17.5199595,13.3471253 L15.8396733,13.3471253 C15.8396733,14.2196147 15.6721892,14.95938 15.3372212,15.5664213 L16.8972082,17.1657667 C16.9922524,17.2627884 17.0397263,17.3775604 17.0396299,17.5100828 C17.0395335,17.6426052 16.9920596,17.7574276 16.8972082,17.8545502 C16.8071765,17.9513702 16.6946851,17.9998306 16.559734,17.9999665 C16.4247828,17.9999665 16.3122914,17.9515719 16.2222597,17.8545502 L14.7371706,16.3470325 C14.7013351,16.3821686 14.6637879,16.4153435 14.6246792,16.4464243 C14.5746509,16.4872703 14.4696782,16.5599861 14.3097611,16.6645719 C14.1525436,16.7674536 13.98975,16.8606989 13.8222019,16.9438371 C13.657176,17.025529 13.4521948,17.0995055 13.2072585,17.1657667 C12.9697908,17.2310615 12.7253536,17.2645106 12.4798237,17.2653097 L12.4798237,10.408487 L11.5194535,10.408487 L11.5194535,17.2653097 C11.2626907,17.265191 11.0069993,17.2306703 10.7586183,17.1625898 C10.5060669,17.0936055 10.2885546,17.0093923 10.1060813,16.9099501 C9.92360811,16.8105079 9.75853395,16.7108639 9.61085885,16.6110183 C9.46337653,16.5114753 9.35459628,16.4285731 9.28451808,16.3623119 L9.17231585,16.2549023 L7.80000735,17.8392708 C7.70685797,17.9433049 7.57621636,18.0016027 7.43997699,17.9999665 C7.32194364,18.0006744 7.20754029,17.9572701 7.11739558,17.877545 C7.02447287,17.7902185 6.96907331,17.6674218 6.96369587,17.5368596 C6.9544007,17.4067776 6.99616962,17.2783491 7.07936827,17.1811974 L8.59496596,15.4438835 C8.3049174,14.8623583 8.15989312,14.1634389 8.15989312,13.3471253 L6.47989604,13.3471253 C6.35321119,13.3485791 6.23140102,13.2961042 6.14242179,13.201744 C6.04757042,13.1048232 6,12.9900511 6,12.8574279 C6,12.7248047 6.04737764,12.6100326 6.14242179,12.5131118 C6.23141996,12.4187811 6.3532176,12.3663116 6.47989604,12.3677305 L8.15989312,12.3677305 L8.15989312,10.1177244 L6.86248251,8.79386217 C6.76753475,8.69684046 6.72001267,8.58206841 6.71991628,8.44954604 C6.71981988,8.31702366 6.76734196,8.20220119 6.86248251,8.10507863 C7.04933008,7.91125204 7.35058342,7.91125204 7.537431,8.10507863 L8.8348416,9.42909215 L15.1647248,9.42909215 L16.4621354,8.10507863 C16.6490324,7.91123438 16.9503315,7.91123438 17.1372285,8.10507863 C17.2322726,8.20199948 17.2797465,8.31682195 17.2796501,8.44954604 C17.2795537,8.58227012 17.2320798,8.69704217 17.1372285,8.79386217 L15.8398178,10.1177244 L15.8398178,12.3677305 L17.5199595,12.3677305 C17.6466444,12.3662767 17.7684545,12.4187516 17.8574338,12.5131118 C17.9523815,12.6099318 18,12.7247038 18,12.8574279 L17.9995662,12.8574279 Z M14.3996964,8.44878963 L9.59929161,8.44878963 C9.59929161,7.77024279 9.83304626,7.19249968 10.3005556,6.71556032 C10.7680649,6.23862096 11.3342813,6.00010085 11.9992048,6 C12.6643212,6 13.2305858,6.23852011 13.6979987,6.71556032 C14.1654116,7.19260054 14.399359,7.77034364 14.399841,8.44878963 L14.3996964,8.44878963 Z" id="形状" fill="#2B6E50" fill-rule="nonzero"></path>
                </g>
            </g>
        </g>
    </svg>`
  },
])

const quickQuestions = (item) => {
  emit('quick-questions', item)
}
</script>

<style>
.questions-wrap {
  width: 924px;
  margin: 250px auto 0;
}

.questions {
  box-shadow: 0px 0px 20px 0px rgba(51, 83, 69, 0.15);
  background-color: rgba(255, 255, 255, 1);
  border-radius: 20px;
  width: 924px;
  height: 433px;
  justify-content: flex-center;
}

.questions-title {
  width: 224px;
  height: 45px;
  overflow-wrap: break-word;
  color: rgba(34, 34, 34, 1);
  font-size: 32px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  line-height: 45px;
  margin: 50px 0 0 40px;
}

.questions-list {
  width: 844px;
  height: 268px;
  flex-wrap: wrap;
  margin: 20px 0 50px 40px;
}

.question-item {
  background-color: rgba(241, 247, 244, 1);
  border-radius: 10px;
  width: 412px;
  height: 124px;
  justify-content: flex-center;
  margin: 0 20px 20px 0;
}

.question-item:nth-child(2n) {
  margin-right: 0;
}
.question-item:nth-last-child(-n + 2) {
  margin-bottom: 0;
}

.question-item-title {
  width: 160px;
  height: 24px;
  margin: 20px 0 0 20px;
}

.question-item-dot {
  background-color: rgba(216, 216, 216, 1);
  border-radius: 50%;
  width: 24px;
  height: 24px;
}

.question-item-title-text {
  width: 126px;
  height: 24px;
  overflow-wrap: break-word;
  color: rgba(43, 110, 80, 1);
  font-size: 18px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  line-height: 24px;
}

.question-item-description {
  width: 364px;
  height: 48px;
  overflow-wrap: break-word;
  color: rgba(34, 34, 34, 1);
  font-size: 14px;
  font-weight: normal;
  text-align: left;
  line-height: 24px;
  margin: 12px 0 20px 20px;
}
</style>
